<template>
  <view class="bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[40rpx] box-border">
    <view class="w-full">
      <u-form borderBottom :label-width="150">
        <u-form-item label="手机号" borderBottom><u-input class="flex-1" v-model="formData.mobile" :border="false" placeholder="请输入手机号码" /></u-form-item>
        <u-form-item label="验证码" borderBottom>
          <u-input class="flex-1" v-model="formData.code" placeholder="请输入验证码" :border="false" />
          <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]" @click="sendSms">
            <u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" change-text="x秒" />
            {{ codeTips }}
          </view>
        </u-form-item>
      </u-form>
      <view class="mt-[40rpx]"><u-button type="primary" shape="circle" @click="handleConfirm">确定</u-button></view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { SMSEnum } from '@/utils/type';
// import { userBindMobile } from '@/api/user'
// import { smsSend } from '@/api/app'
// import { SMSEnum } from '@/enums/appEnums'
// import { reactive, ref, shallowRef } from 'vue'
// import { useUserStore } from '@/stores/user'
// const uCodeRef = shallowRef()
export default {
  // components: { newsList },
  data() {
    return {
      codeTips: '',
      formData: {
        type: 'bind',
        mobile: '',
        code: ''
      }
    };
  },
  computed: {
    ...mapState(['temToken'])
  },
  methods: {
    ...mapActions(['login']),
    codeChange(text) {
      this.codeTips = text;
    },
    async sendSms() {
      if (!this.formData.mobile) return uni.$u.toast('请输入手机号码');
      if (this.$refs.uCodeRef.canGetCode) {
        await uni.$u.api.smsSend({
          scene: SMSEnum.BIND_MOBILE,
          mobile: this.formData.mobile
        });
        uni.$u.toast('发送成功');
        this.$refs.uCodeRef.start();
      }
    },
    async handleConfirm() {
      if (!this.formData.mobile) return uni.$u.toast('请输入手机号码');
      if (!this.formData.code) return uni.$u.toast('请输入验证码');
      await userBindMobile(this.formData, { token: this.temToken });
      uni.$u.toast('绑定成功');
      this.login(this.temToken);
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
};
</script>

<style lang="scss">
page {
  height: 100%;
}
</style>
